<template>
  <div class="payView-container">
    <div class="header">
      <van-nav-bar
        title="确认订单"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
    </div>

    <div class="payDetail">
      <div class="address-cards" v-if="defaultaddress" @click="setAddress">
        <div class="address-border">默认</div>
        <div class="person">
          <p class="address-city">{{ defaultaddress.address_detail }}</p>
          <p class="address-person">
            {{ defaultaddress.name }} {{ defaultaddress.mobile }}
          </p>
        </div>
        <van-icon name="arrow" class="more-icon" />
      </div>

      <div
        class="goods-cards"
        v-for="item in goodsinfo.goodsList"
        :key="item.id"
      >
        <img :src="item.list_pic_url" />
        <div class="goods-info">
          <div class="title">{{ item.goods_name }}</div>
          <div class="price">
            <span class="price-text"> &yen; {{ item.retail_price }}</span>
            <span class="count">x {{ item.number }}</span>
          </div>
        </div>
      </div>

      <div class="goods-params">
        <van-cell title="商品合计" :value="`￥${totol}`" />
        <van-cell title="运费" value="免运费" />
        <van-cell title="优惠券" value="暂无" />
      </div>
    </div>

    <div class="footer-pay">
      <div class="right-pay-btn">
        <span class="text">实付: </span>
        <span class="price">&nbsp; &yen; {{ totol }}</span>
        <button>支付</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getListAction } from "@/api/user";
import { detailAction } from "@/api/Cart";
export default {
  data() {
    return {
      addresslist: [],
      goodsinfo: {},
    };
  },
  computed: {
    defaultaddress() {
      return this.addresslist.find((item) => item.is_default == 1);
    },
    totol() {
      if(this.goodsinfo.goodsList &&  this.goodsinfo.goodsList.length==0)return 0
      return ( this.goodsinfo.goodsList &&
        this.goodsinfo.goodsList.reduce((prev, next) => {
          return prev + next.retail_price * next.number;
        }, 0)
      );
    },
  },
  methods: {
    async getlist() {
      let res = await getListAction({
        openId: localStorage.getItem("openId"),
      });
      this.addresslist = res.data;
      let res2 = await detailAction({
        openId: localStorage.getItem("openId"),
        addressId: this.defaultaddress.id,
      });
      this.goodsinfo = res2;
    },
    setAddress() {
      this.$router.replace(`/user/address?redirect=${this.$route.path}`);
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style scoped lang='scss'>
.payView-container {
  .header {
    height: 81px;
    padding-bottom: 20px;
    ::v-deep .van-nav-bar {
      height: 100%;
      .van-nav-bar__content {
        height: 100%;
      }
      .van-nav-bar__text {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }
      .van-icon {
        width: 30px;
        height: 30px;
        color: #000;
      }
      .van-nav-bar__title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .payDetail {
    background-color: #f8f8f8;
    padding: 30.5px 20px 0 20px;
    height: calc(100vh - 108px - 40px - 180px);
    .address-cards {
      position: relative;
      height: 206px;
      background-color: #fff;
      padding: 58px 14px 61.5px 26px;
      display: flex;
      margin-bottom: 25.5px;
      .address-border {
        width: 100px;
        height: 40px;
        border: 1px solid rgba(158, 66, 66, 1);
        border-radius: 4px;
        text-align: center;
        margin-right: 35px;
      }
      .address-city {
        font-size: 28px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: 14px;
      }
      .address-person {
        font-size: 24px;
        color: #999999;
        letter-spacing: 0;
        font-weight: 400;
      }
      .more-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateX(-50%);
      }
    }
    .goods-cards {
      height: 253px;
      background-color: #fff;
      padding: 43px 22px 41px 28px;
      display: flex;
      img {
        width: 174px;
        height: 169px;
        margin-right: 35px;
      }
      .goods-info {
        width: 416px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          font-size: 26px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 400;
        }
        .price {
          display: flex;
          justify-content: space-between;
          .price-text {
            font-size: 28px;
            color: #9e4242;
            letter-spacing: 0;
            font-weight: 500;
          }
          .count {
            font-size: 24px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
      }
    }
    .goods-params {
      margin-top: 26px;
      .van-cell::after {
        border: 1px solid rgba(214, 214, 214, 1);
      }
      .van-cell {
        height: 87px;
      }
      .van-cell__title {
        font-size: 24px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
      }
      .van-cell__value {
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .footer-pay {
    height: 132px;
    background-color: #fff;
    text-align: right;
    padding-right: 20px;
    .right-pay-btn {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: end;
      .text {
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
      }
      .price {
        font-size: 28px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 500;
      }
      button {
        background: #cea62a;
        border-radius: 35.75px;
        width: 193px;
        height: 72px;
        border: 0;
        margin-left: 41px;
        font-size: 28px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
  }
}
</style>


